<template>
	<div class="login-container">
		<img src="../../assets/logo.png" class="logo-box animated zoomInDown" />
		<el-form class="login-form animated zoomInUp" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
			<h3 class="title">B端商家管理后台</h3>
			<el-form-item prop="businessNumber">
				<span class="svg-container svg-container_login">
					<svg-icon icon-class="user" />
				</span>
				<el-input name="businessNumber" type="type" v-model="loginForm.businessNumber" placeholder="商户号" />
			</el-form-item>
			<el-form-item prop="username">
				<span class="svg-container svg-container_login">
					<svg-icon icon-class="user" />
				</span>
				<el-input name="username" type="number" maxLength="11" v-model="loginForm.username" placeholder="账号" />
			</el-form-item>
			<el-form-item prop="password">
				<span class="svg-container">
					<svg-icon icon-class="password"></svg-icon>
				</span>
				<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" maxLength="12" v-model="loginForm.password" autoComplete="on"
				    placeholder="请输入密码">
				</el-input>
				<span class="show-pwd" @click="showPwd">
					<svg-icon icon-class="eye" />
				</span>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>

			</el-form-item>
			<p class="comText">广州前实网络科技有限公司 © 2018 All Rights Reserved</p>
		</el-form>
	</div>
</template>
<script>
	import {
		isvalidUsername
	} from '@/utils/validate'
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
	import {
		getToken,
		setToken
	} from '@/utils/auth'
	import {
		SUCCESS_REQUEST_STATUS,
		secondDirectory,
		tabList
	} from '@/utils/config.js'
	import Layout from '../../views/layout/Layout'
	export default {
		name: 'login',
		data() {
			// 验证用户名
			const validateUsername = (rule, value, callback) => {
				!value ? callback(new Error('账号不能为空')) : value.length < 1 ? callback(new Error('请输入11位数字号码')) :
					callback()

			}
			// 验证商户号
			const validateBusiness = (rule, value, callback) => {
				!value ? callback(new Error('商户号不能为空')) : callback()
			}
			// 验证密码
			const validatePass = (rule, value, callback) => {
				!value ? callback(new Error('密码不能为空')) : value.length < 6 ? callback(new Error('密码不能少于6位')) :
					callback()
			}
			return {
				loginForm: {
					username: '',
					password: '',
					businessNumber: ''
				},
				loginRules: {
					businessNumber: [{
						required: true,
						trigger: 'blur',
						validator: validateBusiness
					}],
					username: [{
						required: true,
						trigger: 'blur',
						validator: validateUsername
					}],
					password: [{
						required: true,
						trigger: 'blur',
						validator: validatePass
					}]
				},
				enPassword: '',
				loading: false,
				rsaKey: null,
				pwdType: 'password'
			}
		},

		methods: {
			// 密码是否可看
			showPwd() {
				this.pwdType = this.pwdType === 'password' ? '' : 'password'
			},
			// 登录操作
			handleLogin() {
				let attr = !this.loginForm.businessNumber ? '商务号不能为空' : !this.loginForm.username ? '账号不能为空': !this.loginForm.password?'密码不能为空':this.loginForm.password.length<6?'密码不能少于6位':''
				if(attr) {
					this.$message({
						type: 'error',
						message: attr
					})
					return
				}
				this.loading = true
				console.log(this.$get)
				
				this.$get({
					url: 'auth/account/login/',
					data: {
						merchantNumber: this.loginForm.businessNumber,
						account: this.loginForm.username,
						password: this.loginForm.password
					},
					callback: res => {
						console.log(res)
						if(res.status === 200) {
							setToken(res.data.account)
							window.sessionStorage.setItem('merchantUserAccountId', res.data.id)
							window.sessionStorage.setItem('merchantId', res.data.merchantId)
							this.$router.push({
								path: '/trade'
							})
							
						} 
					}
				})
				
				return
				this.$ajax({
					type: 'GET',
					key: 'public_key',
					api: 'public_key',
					params: {
						loginName: this.loginForm.username
					}
				}).then(res => {
					console.log(res)
					this.rsaKey.setPublic(b64tohex(res.data.modulus), b64tohex(res.data.exponent))
					this.enPassword = hex2b64(this.rsaKey.encrypt(this.loginForm.password))
					if (this.enPassword) {
						this.getLogin()
					}
				}).catch(err => {
					console.log(err)
				})

			},
			getLogin() {
				this.$ajax({
					api: 'admin/login',
					params: {
						loginName: this.loginForm.username,
						enPassword: this.enPassword,
						merchantCode: this.loginForm.businessNumber
					}
				}).then(res => {
					this.loading = false
					console.log(res)
					if (res.status === SUCCESS_REQUEST_STATUS) {
						setToken(res.data.token)
						window.localStorage.setItem('merchantUserId', res.data.merchantUserId)
						sessionStorage.setItem('loginName', res.data.nickName)
						if(!res.data.menuList.length){
							this.$message({
								type:'error',
								message: '该用户没有分配权限'
							})
							return
						}
						res.data.menuList.forEach(item => {

							switch (item.name) {
								case 'member':
									item.icon = 'icon-huiyuan'
									break;
								case 'order':
									item.icon = 'icon-gouwuche'
									break;
								case 'permission':
									item.icon = 'icon-add-permissions'
									break;
								case 'product':
									item.icon = 'icon-shangpin'
									break;
								case 'shop':
									item.icon = 'icon-msnui-dianpu'
									break;
								case 'trade':
									item.icon = 'icon-caiwu'
									break;
							}
							item.currentColor = '#1973bf'
						})
						res.data.menuList.forEach((item, index) => {
							if(item.menuName == '订单' && !res.data.merchant.basicMall){
								res.data.menuList.splice(index,1)
							}
						})
						console.log(res.data.menuList)
						window.localStorage.setItem('menuList', JSON.stringify(res.data.menuList))
						// 设置是否显示会员等级 
						this.setSeniorMall(res.data.merchant.seniorMall) 
						// 设置会员注册审核权限是否开通
						this.setMemberAudit(res.data.merchant.memberAudit)
						window.localStorage.setItem('basicMall', res.data.merchant.basicMall)
						for (let i in secondDirectory) {
							res.data.menuList.forEach((item) => {
								if (item.name == i) {
									item.childMenu.forEach((cel, index) => 　{
										console.log(secondDirectory[i].list[index])
										if(!cel.select && secondDirectory[i].list){
											secondDirectory[i].list.forEach((child, childIndex) => {
												if(cel.menuName == child.val) {
													
													secondDirectory[i].list[childIndex].show = false
												}
											})
										}
										//secondDirectory[i].list[index]? secondDirectory[i].list[index].show = cel.select
										tabList[i][0].title = item.childMenu[0].menuName
									})
								}
							})
						}
						console.log(secondDirectory)
						this.$router.push({
							path: `/${res.data.menuList[0].name}`
						})
						
					}else {
						this.$message({
							message: res.data.message,
							type: 'error'
						});
					}
				}).catch(err => {
					this.$message({
						message: err.message,
						type: 'error'
					});
					this.loading = false

				})
			},
			...mapMutations({
				setMemberAudit: 'SET_MEMBER_AUDIT',
				setSeniorMall: 'SET_SENIOR_MALL',
				setSecondDirectory: 'SET_SECOND_DIRECTORY',
				setPublicKey: 'SET_PUBLIC_KEY'
			}),
		},
		computed: {
			...mapGetters([
				'getPublicKey',
				'secondDirectory'
			])
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss">
	$bg:#2d3a4b;
	$light_gray:#eee;
	$dark_gray:#889aa4;

	.login-container {
		position: fixed;
		height: 100%;
		width: 100%;
		background-color: $bg;
		.el-input {
			display: inline-block;
			height: 47px;
			width: 85%;
			input {
				background: transparent;
				border: 0px;
				-webkit-appearance: none;
				border-radius: 0px;
				padding: 12px 5px 12px 15px;
				color: $light_gray;
				height: 47px;
				&:-webkit-autofill {
					-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
					-webkit-text-fill-color: #fff !important;
				}
			}
		}
		.el-form-item {
			border: 1px solid rgba(255, 255, 255, 0.1);
			background: rgba(0, 0, 0, 0.1);
			border-radius: 5px;
			color: #454545;
		}
		.logo-box {
			left: 50%;
			top: 50%;

			transform: translateY(-260px);
			margin-left: -100px;
			position: absolute;
		}
		.login-form {
			position: absolute;
			left: 0;
			right: 0;
			top: 50%;
			border-radius: 5px;
			transform: translateY(-300px);
			width: 520px;
			padding: 35px 35px 15px 35px;
			margin: 120px auto;
			border: 1px solid #fff;
		}
		.tips {
			font-size: 14px;
			color: #fff;
			margin-bottom: 10px;
			span {
				&:first-of-type {
					margin-right: 16px;
				}
			}
		}
		.comText {
			color: #fff;
			font-size: 14px;
			text-align: center;
		}
		.svg-container {
			padding: 6px 5px 6px 10px;
			color: $dark_gray;
			vertical-align: middle;
			width: 30px;
			display: inline-block;
			&_login {
				font-size: 20px;
			}
		}
		.title {
			font-size: 22px;
			font-weight: 400;
			color: $light_gray;
			margin: 0px auto 40px auto;
			text-align: center;
			letter-spacing: 3px
		}
		.show-pwd {
			position: absolute;
			right: 10px;
			top: 7px;
			font-size: 16px;
			color: $dark_gray;
			cursor: pointer;
			user-select: none;
		}
	}
</style>
